<!--群组信息面板组件-->
<template>
  <!--展示群组信息-->
  <div v-if="group" class="card w-full bg-base-100 shadow-xl">
    <figure><img src="https://picsum.photos" alt="Shoes" oncontextmenu="return false"/></figure>
    <div class="card-body">
      <div class="avatar">
        <div class="ring-primary ring-offset-base-100 w-24 rounded-full ring ring-offset-2">
          <img :src="group.avatarUrl" oncontextmenu="return false"/>
        </div>
      </div>

      <h2 class="card-title">{{group.name}}</h2>
      <input type="text" class="input" v-model="group.name" @focusout="clickUpdateGroup"/>

      <span>群号 {{group.groupNo}}</span>
      <span>群人数 {{group.users.length}}</span>

      <div class="collapse bg-base-100 border-base-300 border">
        <input type="checkbox" />
        <div class="collapse-title font-semibold">查看群成员</div>
        <div class="collapse-content text-sm">
          <div class="grid grid-cols-10 gap-4">
            <div v-for="member in group.users">
              <div class="avatar" >
                <div class="ring-primary ring-offset-base-100 w-20 rounded-full ring ring-offset-2">
                  <img :src="member.avatarUrl" />
                </div>
              </div>
              <span>{{member.showName}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="card-actions justify-center">
        <button class="btn btn-ghost btn-sm" @click="clickMessage">发消息</button>
        <button class="btn btn-ghost btn-sm" @click="clickVoice">语音</button>
        <button class="btn btn-ghost btn-sm" @click="clickVideo">视频</button>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import UserApi from '@/api/user.js'
import type {GroupItem} from '../../models/chat_model.ts';
import {useChatStore} from "@/stores/chating_store.js";
import {defineProps, inject, toRaw} from 'vue'
import {useRoute, useRouter} from "vue-router";

//父组件传值时的定义
const props = defineProps<{
  group?: GroupItem;
}>();

const route = useRoute();
const router = useRouter();
const chatStore = useChatStore()


const clickAdd = ()=>{
  console.debug("clickAdd ...")
}


const clickMessage = () => {
  console.log(`clickMessage...`);
  chatStore.obtainChatting(toRaw(props.group))

  router?.replace("/chats")
}
const clickVoice = () => {
  console.log(`clickVoice...`);

}
const clickVideo = () => {
  console.log(`clickVideo...`);

}

const clickUpdateGroup = ()=>{
  let relId = props.group?.relId;
  let name = props.group?.name;
  if (relId && name){
    UserApi.editGroupInfo({relId: relId,name:name})
  }else{
    console.error("参数relId、name 不能为空")
  }
}

</script>

<style scoped >

</style>